<template>
	<div class="favorite_list">
		<h1>我的收藏</h1>
		<a-space direction="vertical" fill v-if="favoriteList.length >= 1">
			<template #split>
				<a-divider />
			</template>
			<a-card hoverable="true" v-for="item in favoriteList" :key="item">
				<template #title>
					<div class="flex_center">
						<a-avatar :style="{ backgroundColor: '#00d0b6' }"
							><img alt="头像" :src="avatarUrl"
						/></a-avatar>
						<div>
							于 {{ item.createDate }} 收藏了
							{{ item.movie_name }}
						</div>
					</div>
				</template>
				<template #extra>
					<a-link @click="goMovieDetails(item.movie_id)">More</a-link>
				</template>
				<movie-show :movieData="getInfo(item.movie_id)"></movie-show>
				<template #actions>
					<div
						@click="cancelFavorite(item.movie_id, item.movie_name)"
					>
						<icon-heart-fill />取消收藏
					</div>
				</template>
			</a-card>
		</a-space>
		<a-empty v-else />
	</div>
</template>

<script setup>
import usersApi from '../../api/users'
import movieApi from '../../api/movie'
import { useRouter } from 'vue-router'
const router = useRouter()
const avatarUrl = localStorage.getItem('avatarUrl')
const favoriteList = ref([])
// 获取收藏列表
usersApi.getFavoriteList().then(res => {
	// 过滤出已收藏的电影项目
	favoriteList.value = res.filter(x => {
		if (x.favorite) {
			// x.createDate = x.createDate.slice(0, 10)
			x.createDate = movieApi.transformDate(x.createDate)
			return x
		}
	})
})
// 获取对应电影的信息
function getInfo(movie_id) {
	return movieApi.getMovieDetails(movie_id)
}
// 前往对应的电影详情页
function goMovieDetails(movie_id) {
	router.push(`/movieDetails/${movie_id}`)
}
// 取消收藏
function cancelFavorite(movie_id, movie_name) {
	usersApi.delFavoriteMovie(movie_id, movie_name).then(res => {
		res.status === 0
			? AMessage.success('取消成功!')
			: AMessage.error('取消失败!')
	})
}
</script>

<style lang="scss" scoped>
.favorite_list {
	width: 1280px;
	margin: 0 auto;
	h1 {
		padding: var(--normal-distance);
		border-left: var(--normal-sm-distance) solid var(--br-bg);
		color: var(--fc-bg);
		background-color: var(--ti-bg);
	}
	.flex_center {
		display: flex;
		align-items: center;
		color: var(--fc-bg);
		:deep(.arco-card-size-medium .arco-card-header) {
			height: auto;
		}
		& > * {
			margin: var(--normal-sm-distance) 0;
		}
		& > * + * {
			margin-left: var(--normal-distance);
		}
	}
}
:deep(.arco-card) {
	background-color: var(--main-2-bg);
}
:deep(.arco-card-bordered) {
	border: 1px solid var(--fc-bg);
}
:deep(.arco-card-header) {
	border-bottom: 1px solid var(--fc-bg);
}
:deep(.arco-card-actions-item) {
	color: var(--main-bg);
	&:hover {
		color: rgb(32 108 207);
	}
}
</style>
